New Page

Click Here For Video Review.

You're game is nearly complete! Way to go.

This lesson will teach you how to create a little menu page telling the user who made this great game and how to play!

A menu, or index file, is the first page someone would see of your game.
It will tell them how to play and who created it!

On the right is a little example of what your menu could look like!

You'll have some instructions, a button and of course who created the game!

The example to the right is just an image, the button does nothing (sorry).


Great JOB! When you understand this slide, Click the RIGHT ARROW to move on!


Moving Text

Click Here For Video Review

You've seen how to create Text Objects once when you created your score.
This slide will give you a little more practice!

Pay close attention to how the offset property works!
For example:

ball.center().offset(10, -50);

That code first centers the ball, then offsets it from that position 10 to the right (positive 'x' direction) and 50 up (negative 'y' direction).

Go ahead and do the activity below!



The code in the editor creates some text
Follow the instructions below!
  1. Click on Run The Code! to see the text in the top left of the screen.
  2. On line 9, add code to center the text horizontally at the top of the screen.
    Hint menu.centerH();
  3. On line 10, create another text object that says Please Play!.
    Use line 8 as an example for you!
    4. Hint var play = new sjs.Text("Please Play!", 20, "white")
  4. On line 11 use the offset property with centerH(), to move your new text just below the orginal text.
    5. Hint play.centerH().offset(0, 25);


Great JOB! When you understand this slide, Click the RIGHT ARROW to move on!


Buttons

Click Here For Video Review

Buttons are a lot of fun and very useful. Read the left column first then look at the example on the right!



When you click the button below it will center the planet and push it right!
Look at the code below the example on how it does that!



var planet = new sjs.Image("Images/planet.png");

var btn = new sjs.Button("I'M FLYING", function(){
planet.center();
planet.friction = 0;
planet.pushRight();
});
btn.centerH();
With a button you can trigger a function and run whatever code you'd like!

Maybe they'd like to play your game!
An easy way to change between files is by using buttons.

You can have a button take them to your pong.html file so they can play your game.

Take a look at the code below!
Click on the code for an explanation
var startBtn = new sjs.Button("Play Pong!", function(){
window.location = "pong.html";
}); var startBtn - This creates a variable named startBtn, you can name the variable whatever you'd like.

new sjs.Button - This creates a button from the simply.js library.

"Play Pong!", function() - The button will say start then we create the function to decide what happens when they click on the button.

window.location="pong.html"; - When you click on the button it takes you to the pong.html page.


Great JOB! When you understand this slide, Click the RIGHT ARROW to move on!


Activity

Click Here For Video Review

This Activity will walk you through the following:

  1. Create a new HMTL file for your menu or index page.
  2. Customize your index.html page!
Read the next lines carefully!

    You'll be opening a new text file to add your code for your menu.

  1. Open a new text file with your text editor, click on File > New File.
    2. View Screenshot

    MAC USERS: your File menu is at the very top left of your computer screen!
  2. Save the new file as index.html inside your Pong folder.
    To save use: CNTL + S, or click File > Save
    1. Windows Users Screenshot Help:
      2. View Screenshots 1. 2.

      Your Sublime Text Editor will now look like this (notice pong.html in the tab).

      3.
    2. MAC Users Screenshot Help:
      3. View Screenshots 1. 2.

      Your Sublime Text Editor will now look like this.

      3.
  3. Add in the neccessary HTML & JavaScript to your index.html page. Use the Hint below for help.
    4. Hint
    <!DOCTYPE html>
    <html>
    <head>
    <title> Menu </title>
    <script src="https://simplycodingcourses.com/files/simplyjs/simply.js"></script>
    <script>
    function start(){
    sjs.open();

    } //end start
    </script>
    </head>
    <body onload="start()">
    <h1> Menu </h1>

    <div id="target" style="margin:auto;background:grey;"></div>
    </body>
    </html>
  4. Below sjs.open(); in the start function of your index.html page, add a new text object that says Menu.
    5. Hint function start(){
    sjs.open();
    var menu_text = new sjs.Text("MENU",28,"blue");

    } //end start

    Only add the code in bold.
    Don't add in another function and sjs.open().
  5. Below your text object, use the centerH method to put your text object on the top center of the screen.
    6. Hint function start(){
    sjs.open();
    var menu_text = new sjs.Text("MENU",28,"blue");
    menu_text.centerH();

    } //end start

    Only add the code in bold.
  6. Below the centerH() menu_text property, add another text object telling how to play the game.
    7. Hint function start(){
    sjs.open();
    var menu_text = new sjs.Text("MENU",28,"blue");
    menu_text.centerH();

    var game_text = new sjs.Text("Use the Arrow Keys to Control the Paddles. Don't let the Ball get by you!",28,"#ff0");

    } //end start

    Only add the code in bold.
  7. Below your new text object, use the centerH() and offset() properties to place it just below your menu text.
    8. Hint function start(){
    sjs.open();
    var menu_text = new sjs.Text("MENU",28,"blue");
    menu_text.centerH();

    var game_text = new sjs.Text("Use the Arrow Keys to Control the Paddles. Don't let the Ball get by you!",28,"#ff0");
    game_text.centerH().offset(0, 30);

    } //end start

    Only add the code in bold.
  8. Below your game text centerH() and offset() method, add a button that takes you to the pong.html file when clicked.
    9. Hint function start(){
    sjs.open();
    var menu_text = new sjs.Text("MENU",28,"blue");
    menu_text.centerH();

    var game_text = new sjs.Text("Use the Arrow Keys to Control the Paddles. Don't let the Ball get by you!",28,"#ff0");
    game_text.centerH().offset(0, 30);

    var startBtn = new sjs.Button("Start", function(){
    window.location = "pong.html";
    });

    } //end start

    Only copy the code in bold above
  9. Below the button code, center your start button
    1. Make sure to put this code below the button's function or it won't work how you think.
    Hint function start(){
    sjs.open();
    var menu_text = new sjs.Text("MENU",28,"blue");
    menu_text.centerH();

    var game_text = new sjs.Text("Use the Arrow Keys to Control the Paddles. Don't let the Ball get by you!",28,"#ff0");
    game_text.centerH().offset(0, 30);

    var startBtn = new sjs.Button("Start", function(){
    window.location = "pong.html";
    });

    startBtn.center();

    } //end start

    Only copy the code in bold above
  10. Below your button, add another text object that says who created the game.
    Then move it the bottom center.
    11. Hint /* startBtn code is here */

    var info_text = new sjs.Text("Created By Jon Galt",20,"black");

    info_text.bottom().centerH();

    } //end start

    Remember nothing should be below your closing bracket, } //end start
  11. If you customized your game, you may want to make another text object that tells them how to play the game. This step is up to you if you want to do it.


If you menu page is functioning and looking how you'd like, go on to the Next Lesson!

If it's not working remember to check the console by Right Clicking in the browser and selecting Inspect Element.